<template>
    <div class="header_container">
        <div class="nav">
            <img src="../../images/logo.png" alt="职业网">
            <ul>
                <li><router-link to="/home">首页</router-link></li>
                <li><router-link to="/read">阅读</router-link></li>
                <li><router-link to="/radio">电台</router-link></li>
                <li><router-link to="/zixun">资讯</router-link></li>
                <li><router-link to="/about">关于</router-link></li>
            </ul>
            <ul class="nav-right">
                <li><a href="#">登陆 / 注册</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    // data(){
    //     return {
    //         randomSrc:"http://192.168.0.113:8080/ran/random"
    //     }
    // },
    // methods: {
    //     getFiles(){
    //         var num = Math.random();
    //         this.randomSrc = "http://192.168.0.113:8080/ran/random?random = "+num;
    //     }
    // }
}
</script>

<style lang="less" scoped>
.header_container {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgba(94,102,119,1);
    z-index:9;

    .nav {
        height:50px;
        width:1000px;
        margin:0 auto;

        img {
            height:30px;
            margin-top:10px;
            float:left;
        }

        ul {
            float:left;
            overflow: hidden;
            margin-left: 10%;
            width:50%;
            
            li {
                float:left;
                line-height: 50px;
                width:20%;
                text-align:center;
            }
            a {
                color:#fff;
            }
            a:hover,a.router-link-active  {
                color:rgba(239,177,11,1);
            }
        }
        ul.nav-right {
            float:right;
            margin:0;
            width:auto;

            li {
                width:100px;
            }
        }
    }

}
</style>
